<!DOCTYPE html>
<html th:lang="${lang}" xmlns:th="http://www.thymeleaf.org" >
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title th:text="${title}"></title>
    <style>
      header{width: 100%;}
      header img{width: 100%;}
      header{margin-bottom: 10px;}
      .panel-title{padding: 10px;} 
      label{word-wrap:break-word;word-break:break-all;height: auto;}
    </style>
    <!-- Bootstrap -->
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="/bootstrap/css/city-picker.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <script src="/bootstrap/js/jquery.js"></script>
    <script src="/bootstrap/js/bootstrap.js"></script>
    <script src="/bootstrap/js/city-picker.data.js"></script>
    <script src="/bootstrap/js/city-picker.js"></script>
    <!-- import Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      //判断是否为移动端
      function _isMobile() {
        return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      }
      var json=[(${json})];
      var citypicker3;

      function areaSelect(id){
        citypicker3= $("#"+id);
        citypicker3.citypicker('reset');
        $(".city-picker-span").click();
      }
      function next(id){
        for(var i=1;i<=id;i++){
          $("#item"+i).hide();
        }
      }
      $(function(){
        var app = new Vue({
          el: '#app',
          data: {
            className:"container",
            lang:"English",
            title:"注册登记",
            url:"[[${url}]]",
            enable:"[[${english}]]",
            banner:"[[${banner}]]",
            model:{},
            list: json
          },
          created(){
            this.list.forEach(element => {
              if(element.input!=""){
                this.model[element.input]="";  
              }
            });
            if(_isMobile()){
              this.className="container-fluid";
              this.banner="[[${bannerMoblie}]]";
            }
            if("[[${lang}]]"=="en"){
              this.lang="中文"
              this.title="Register Login"
              this.url+="?lang=zh-CN"
            }else{
              this.url+="?lang=en"
            }
          },
          methods: {
            save(){
            },
            next(){

            }
          }
        })
      })
    </script>
  </head>
  <body>
    <div id="app">
      <header>
        <img :src="banner">
      </header>
      <main :class="className">
        <div class="row">
          <div class="col-md-12">
            <div class=" panel panel-default">
              <div class="panel-title">
                  <ul class="nav nav-tabs">
                      <li >
                       <H4>{{title}}</H4>
                      </li>
                      <li class="navbar-right" v-show="enable=='1'" >
                          <a class="btn btn-link" :href="url">{{lang}}</a>
                      </li>
                  </ul>
              </div>
              <div class="panel-body">
                <form  class="form-horizontal">
                  <div th:each="item,i:${list}">
                    <div th:id="${'item'+i.index}" th:switch="${item.type}">
                      <div class="form-group" th:case="-2" >
                        <div class="col-sm-offset-2 col-sm-10 text-right">
                          <button type="submit" v-on:click="save()"  th:id="${item.indexNo}" class="btn btn-primary" th:text="${lang=='en'?'Submit':'提 交'}"></button>
                        </div>
                      </div>
                      <div class="form-group" th:case="-1" >
                        <div class="col-sm-offset-2 col-sm-10 text-center">
                          <button type="button" th:onclick="next([[${item.indexNo}]])" th:id="${item.indexNo}" class="btn btn-primary" th:text="${lang=='en'?'Next':'下一页'}"></button>
                        </div>
                      </div>     
                      <div class="form-group text-left" th:case="0" >
                        <label th:if="${item.required==0}" class="col-sm-offset-2 col-sm-10" th:text="${lang=='en'?item.englishName:item.name}" ></label>
                        <label th:if="${item.required==1}" class="col-sm-offset-2 col-sm-10 text-danger"   th:text="${(lang=='en'?item.englishName:item.name)+' *'}" ></label>
                        <div class="col-sm-offset-2 col-sm-10" >
                          <div th:switch="${lang}">
                            <div th:case="zh-CN">
                              <div th:each="option,index : ${#strings.arraySplit(item.options, '|')}">
                                <p>                                  
                                  <div class="input-group" >
                                    <span class="input-group-addon">
                                      <input type="checkbox" th:id="${index.current+index.index}"  th:name="${item.input}" th:value="${option}" >
                                    </span>
                                    <label class="form-control" th:for="${index.current+index.index}" th:text="${option}"  style="height: auto;" ></label>
                                 </div>
                                </p>
                              </div>
                            </div>
                            <div th:case="en">
                              <div th:each="option,index : ${#strings.arraySplit(item.englishOption, '|')}">
                                <p>
                                  <div class="input-group"  >
                                    <span class="input-group-addon">
                                      <input type="checkbox" th:id="${index.current+index.index}" th:name="${item.input}" th:value="${option}" >
                                    </span>
                                    <label  th:for="${index.current+index}.index" class="form-control"  th:text="${option}" style="height: auto;" ></label>
                                  </div>
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group" th:case="1" >
                        <div th:switch="${item.required}">
                          <div th:case="0">
                            <label class="col-sm-2 control-label" th:for="${item.input}"  th:text="${lang=='en'?item.englishName:item.name}" ></label>
                            <div class="col-sm-10" >
                              <input  type="text" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}">
                            </div>
                          </div>
                          <div th:case="1">
                            <label class="col-sm-2 control-label text-danger" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)+' *'}" ></label>
                            <div class="col-sm-10" >
                              <input  required type="text" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group" th:case="2" >
                        <label th:if="${item.required==1}" class="col-sm-2 control-label text-danger" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)+' *'}" ></label>
                        <label th:if="${item.required==0}" class="col-sm-2 control-label" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)}" ></label>
                          <div class="col-sm-10" >
                            <div th:switch="${lang}">
                              <div th:case="zh-CN">
                                <div th:each="option,index : ${#strings.arraySplit(item.options, '|')}">
                                  <p>                                  
                                    <div class="input-group" >
                                    <span class="input-group-addon">
                                      <input type="radio" th:id="${index.current+index.index}"  th:name="${item.input}" th:value="${option}" >
                                    </span>
                                    <label class="form-control" th:for="${index.current+index.index}" th:text="${option}"  style="height: auto" ></label>
                                  </div>
                                </p>
                                </div>
                              </div>
                              <div th:case="en">
                                <div th:each="option,index : ${#strings.arraySplit(item.englishOption, '|')}">
                                  <p>
                                    <div class="input-group"  >
                                      <span class="input-group-addon">
                                        <input type="radio" th:id="${index.current+index.index}"  th:name="${item.input}" th:value="${option}" >
                                      </span>
                                      <label  th:for="${index.current+index.index}" class="form-control"  th:text="${option}" style="height: auto" ></label>
                                    </div>
                                  </p>
                                </div>
                            </div>
                        </div>
                      </div>
                      </div>
                      <div class="form-group" th:case="3" >
                        <div th:switch="${item.required}">
                          <div th:case="0">
                            <label class="col-sm-2 control-label" th:for="${item.input}"  th:text="${lang=='en'?item.englishName:item.name}" ></label>
                            <div class="col-sm-10" >
                              <textarea type="text" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}"></textarea>
                            </div>
                          </div>
                          <div th:case="1">
                            <label class="col-sm-2 control-label text-danger" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)+' *'}" ></label>
                            <div class="col-sm-10" >
                              <textarea required type="text" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}"></textarea>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group" th:case="4" >
                          <label th:if="${item.required==1}" class="col-sm-2 control-label text-danger" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)+' *'}" ></label>
                          <label th:if="${item.required==0}" class="col-sm-2 control-label" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)}" ></label>
                          <div class="col-sm-10" >
                            <div th:switch="${lang}">
                              <div th:case="zh-CN">
                                <div th:each="option,index : ${#strings.arraySplit(item.options, '|')}">
                                  <p>                                  
                                    <div class="input-group" >
                                    <span class="input-group-addon">
                                      <input type="checkbox" th:id="${item.input+index.index}" th:v-model="${'model.'+item.input}" th:name="${item.input}" th:value="${option}" >
                                    </span>
                                    <label class="form-control" th:for="${item.input+index.index}" th:text="${option}"  style="height: auto;" ></label>
                                  </div>
                                </p>
                                </div>
                              </div>
                              <div th:case="en">
                                <div th:each="option,index : ${#strings.arraySplit(item.englishOption, '|')}">
                                  <p>
                                    <div class="input-group"  >
                                      <span class="input-group-addon">
                                        <input type="checkbox" th:id="${item.input+index.index}" th:v-model="${'model.'+item.input}" th:name="${item.input}" th:value="${option}" >
                                      </span>
                                      <label  th:for="${item.input+index}.index" class="form-control"  th:text="${option}" style="height: auto;" ></label>
                                    </div>
                                  </p>
                                </div>
                            </div>
                        </div>
                      </div>
                      </div>
                      <div class="form-group" th:case="5" >
                        <div th:switch="${item.required}">
                          <div th:case="0">
                            <label class="col-sm-2 control-label" th:for="${item.input}"  th:text="${lang=='en'?item.englishName:item.name}" ></label>
                            <div class="col-sm-10" >
                              <input  type="email" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}">
                            </div>
                          </div>
                          <div th:case="1">
                            <label class="col-sm-2 control-label text-danger" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)+' *'}" ></label>
                            <div class="col-sm-10" >
                              <input  required type="email" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group" th:case="6" >
                        <div th:switch="${item.required}">
                          <div th:case="0">
                            <label class="col-sm-2 control-label" th:for="${item.input}"  th:text="${lang=='en'?item.englishName:item.name}" ></label>
                            <div class="col-sm-10" >
                              <input  type="date" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}">
                            </div>
                          </div>
                          <div th:case="1">
                            <label class="col-sm-2 control-label text-danger" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)+' *'}" ></label>
                            <div class="col-sm-10" >
                              <input  required type="date" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group" th:case="7" >
                        <div th:switch="${item.required}">
                          <div th:case="0">
                            <label class="col-sm-2 control-label" th:for="${item.input}"  th:text="${lang=='en'?item.englishName:item.name}" ></label>
                            <div class="col-sm-10" >
                              <input  type="time" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}">
                            </div>
                          </div>
                          <div th:case="1">
                            <label class="col-sm-2 control-label text-danger" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)+' *'}" ></label>
                            <div class="col-sm-10" >
                              <input  required type="time" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group" th:case="8" >
                        <div th:switch="${item.required}">
                          <div th:case="0">
                            <label class="col-sm-2 control-label" th:for="${item.input}"  th:text="${lang=='en'?item.englishName:item.name}" ></label>
                            <div class="col-sm-10" >
                              <input  type="number" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}">
                            </div>
                          </div>
                          <div th:case="1">
                            <label class="col-sm-2 control-label text-danger" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)+' *'}" ></label>
                            <div class="col-sm-10" >
                              <input  required type="number" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group" th:case="9" >
                        <div th:switch="${item.required}">
                          <div th:case="0">
                            <label class="col-sm-2 control-label" th:for="${item.input}"  th:text="${lang=='en'?item.englishName:item.name}" ></label>
                            <div class="col-sm-10" >
                              <input  type="tel" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}">
                            </div>
                          </div>
                          <div th:case="1">
                            <label class="col-sm-2 control-label text-danger" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)+' *'}" ></label>
                            <div class="col-sm-10" >
                              <input  required type="tel" th:v-model="${'model.'+item.input}" class="form-control" th:name="${item.input}" th:placeholder="${lang=='en'?item.englishName:item.name}">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group" th:case="10" >
                        <div th:switch="${item.required}">
                          <div th:case="0">
                          <label class="col-sm-2 control-label" th:for="${item.input}"  th:text="${lang=='en'?item.englishName:item.name}"></label>
                          <div class="col-sm-10">
                            <div class="input-group">
                              <input type="text" class="form-control" th:v-model="${'model.'+item.input}" th:placeholder="${lang=='en'?'Verify Code':'验证码'}">
                              <span class="input-group-btn">
                                <button class="btn btn-primary" type="button" th:text="${lang=='en'?'Verify Code':'验证码'}"></button>
                              </span>
                            </div>
                          </div>
                        </div>
                        <div th:case="1">
                          <label class="col-sm-2 control-label text-danger" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)+' *'}"></label>
                          <div class="col-sm-10">
                            <div class="input-group">
                              <input type="text" class="form-control" required th:v-model="${'model.'+item.input}" th:placeholder="${lang=='en'?'Verify Code':'验证码'}">
                              <span class="input-group-btn">
                                <button class="btn btn-primary"  type="button" th:text="${lang=='en'?'Verify Code':'验证码'}"></button>
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="form-group" th:case="11">
                      <label th:if="${item.required==1}" class="col-sm-2 control-label text-danger" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)+' *'}" ></label>
                      <label th:if="${item.required==0}" class="col-sm-2 control-label" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)}" ></label>
                      <div class="col-sm-10" >
                        <div th:switch="${lang}" > 
                          <div th:case="zh-CN" >
                            <div  style="position: relative;" >
                              <input th:id="${item.input+item.indexNo}" th:v-model="${'model.'+item.input}" placeholder="请选择省/市/区" th:onclick="areaSelect([[${item.input+item.indexNo}]])" class="form-control " style="width: 100%;"  type="text" >
                            </div> 
                          </div>
                          <div th:case="en">
                            
                        </div>
                    </div>
                  </div>
                    </div>
                    <div class="form-group" th:case="12" >
                      <label th:if="${item.required==1}" class="col-sm-2 control-label text-danger" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)+' *'}" ></label>
                      <label th:if="${item.required==0}" class="col-sm-2 control-label" th:for="${item.input}"  th:text="${(lang=='en'?item.englishName:item.name)}" ></label>
                        <div class="col-sm-3" >
                          <p>
                            <div th:switch="${lang}">
                              <div th:case="zh-CN">             
                                    <div class="input-group" >
                                    <span class="input-group-addon">
                                      <input type="radio" th:id="${item.input+'0'}" value="男" th:name="${item.input}" >
                                    </span>
                                    <label class="form-control" th:for="${item.input+'0'}"  style="height: auto" >男</label>
                                  </div>
                                </div>
                              </div>
                              <div th:case="en">
                                <div class="input-group"  >
                                  <span class="input-group-addon">
                                    <input type="radio" th:id="${item.input+'0'}" th:name="${item.input}" value="ladies">
                                  </span>
                                  <label  th:for="${item.input+'0'}" class="form-control"  th:text="${option}" style="height: auto" >ladies</label>
                                </div>
                            </div>
                          </p>
                      </div>
                      <div class="col-sm-3">
                        <p>
                          <div th:switch="${lang}">
                            <div th:case="zh-CN">        
                              <div class="input-group" >
                                <span class="input-group-addon">
                                  <input type="radio" th:id="${item.input+'1'}" value="女" th:name="${item.input}" >
                                </span>
                                <label class="form-control" th:for="${item.input+'1'}"  style="height: auto" >女</label>
                              </div>
                            </div>
                          </div>
                          <div th:case="en">
                              <div class="input-group"  >
                                <span class="input-group-addon">
                                  <input type="radio" th:id="${item.input+'1}" th:name="${item.input}" value="gentleman">
                                </span>
                                <label  th:for="${item.input+'1}" class="form-control"  th:text="${option}" style="height: auto" >gentleman</label>
                              </div>
                          </div>
                        </p>
                      </div>
                      <div class="col-sm-3">
                        <p>
                          <div th:switch="${lang}">
                            <div th:case="zh-CN">
                              <div class="input-group" >
                                <span class="input-group-addon">
                                  <input type="radio" th:id="${item.input+'2'}" value="保密" th:name="${item.input}" >
                                </span>
                                <label class="form-control" th:for="${item.input+'2'}"  style="height: auto" >保密</label>
                              </div>
                            </div>
                          </div>
                          <div th:case="en">
                            <div class="input-group"  >
                              <span class="input-group-addon">
                                <input type="radio" th:id="${item.input+'2'}" th:name="${item.input}" value="secret">
                              </span>
                              <label  th:for="${item.input+'2'}" class="form-control"  th:text="${option}" style="height: auto" >secret</label>
                            </div>
                          </div>
                        </p>
                      </div>
                      </div>
                    </div>
                    </div>
                  </div>
              </div>
            </form>
            </div>
          </div>
      </main>
      <footer>

      </footer>
    </div>
  </body>
</html>